<template>
  <div>
    <!-- banner -->
    <div class="banner" :style="cover">
      <h1 class="banner-title">{{ imageData.name }}</h1>
    </div>
    <!-- 照片详情 -->
    <v-card class="blog-container">
      <v-row>
        <v-col md="6" cols="12">
          <image-preview :src="imageData.url" :width="500" :height="500"/>
        </v-col>
        <v-col md="6" cols="12">
          <h2 style="margin-left: 100px">图片详情</h2>
          <el-form ref="form" :model="imageData" label-width="180px">
            <el-form-item label="图片名称">{{ imageData.name }}</el-form-item>
            <el-form-item label="图片描述">{{ imageData.remark }}</el-form-item>
            <el-form-item label="上传者">{{ imageData.createBy }}</el-form-item>
            <el-form-item label="上传时间">{{ imageData.createTime }}</el-form-item>
          </el-form>
          <div style="margin-left: 100px" class="button" @click="open">
            <div class="button-wrapper">
              <div class="text">下载</div>
              <span class="icon">
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" height="2em" width="2em" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17" stroke-width="2"
                                                                                                                                                                   stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none"></path></svg>
    </span>
            </div>
          </div>
        </v-col>
      </v-row>
    </v-card>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      imageData: {}
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.axios.get("/api/system/picture/list", {
        params: {
          id: this.$route.params.albumId,
        }
      })
          .then(res => {
            if (res.data.rows.length) {
              this.imageData = res.data.rows[0];
            }
          });
    },
    open() {
      this.$prompt('请输入下载秘钥', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        //查询秘钥
        this.axios.get("/api/system/config/list", {
          params: {
            configKey: 'screet',
          }
        }).then(res => {
          if (value === res.data.rows[0].configValue) {
            this.$message({
              type: 'success',
              message: '密钥验证成功！'
            });
            this.downImg()
          }else {
            this.$message({
              type: 'error',
              message: '密钥验证失败！'
            });
          }
        });

      }).catch(() => {
      });
    },
    downImg() {
      // item.FileUrl 是图片 字符串路径 ；item.FileName 是图片名称 自定义的就行
      var image = new Image()
      var that = this
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = that.imageData.name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = this.imageData.url
    },

  },
  computed: {
    cover() {
      return (
          "background: url(" +
          this.imageData.url +
          ") center center / cover no-repeat"
      );
    }
  }
};
</script>

<style scoped>
.photo-wrap {
  display: flex;
  flex-wrap: wrap;
}

.photo {
  margin: 3px;
  cursor: pointer;
  flex-grow: 1;
  object-fit: cover;
  height: 200px;
}

.photo-wrap::after {
  content: "";
  display: block;
  flex-grow: 9999;
}

@media (max-width: 759px) {
  .photo {
    width: 100%;
  }
}

.button {
  --width: 100px;
  --height: 35px;
  --tooltip-height: 35px;
  --tooltip-width: 90px;
  --gap-between-tooltip-to-button: 18px;
  --button-color: #1163ff;
  --tooltip-color: #fff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 0.45em;
  font-family: "Arial";
  transition: background 0.3s;
}

.button::before {
  position: absolute;
  content: attr(data-tooltip);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  background-color: var(--tooltip-color);
  font-size: 0.9rem;
  color: #111;
  border-radius: .25em;
  line-height: var(--tooltip-height);
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
  left: calc(50% - var(--tooltip-width) / 2);
}

.button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--tooltip-color);
  left: calc(50% - 10px);
  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

.button::after, .button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-wrapper, .text, .icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

.text {
  top: 0
}

.text, .icon {
  transition: top 0.5s;
}

.icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover {
  background: #6c18ff;
}

.button:hover .text {
  top: -100%;
}

.button:hover .icon {
  top: 0;
}

.button:hover:before, .button:hover:after {
  opacity: 1;
  visibility: visible;
}

.button:hover:after {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

.button:hover:before {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}

</style>
